import { Card, Divider, Empty, Space } from 'antd';
import Title from 'antd/lib/typography/Title';
import { Link } from 'umi';
import { Chart } from '@antv/g2';
import { useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { shouye } from '@/services';

interface DataType {
  biaoge: Record<string, string>[];
  bing: Record<string, string>[];
  title: string;
  year: string;
}

const defaultData: DataType = {
  biaoge: [],
  bing: [],
  title: '',
  year: '',
};

export default function IndexPage() {
  const [data, setData] = useState<DataType>(defaultData);
  const init = () => {
    const { bing } = data;

    if (bing.length === 0) return;
    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500,
    });

    chart.coordinate('theta', {
      radius: 0.75,
    });

    chart.data(bing);

    chart.scale('percent', {
      formatter: (val) => {
        val = (val * 100).toFixed(2) + '%';
        return val;
      },
    });

    chart.tooltip({
      showTitle: false,
      showMarkers: false,
    });

    chart
      .interval()
      .position('percent')
      .color('item')
      .label('percent', {
        content: (data) => {
          return `${data.item}: ${(data.percent * 100).toFixed(2)}%`;
        },
      })
      .adjust('stack');

    chart.interaction('element-active');

    chart.render();
  };

  useEffect(() => {
    shouye().then((data) => {
      if (data.msg === '成功') {
        setData(data.content);
      } else {
        setData(defaultData);
      }
    });
  }, []);

  useEffect(() => {
    init();
  }, [data.bing]);

  return (
    <Card>
      <Title level={3}>{data.title || '公司名称'}</Title>
      <Title level={4}>{data.year || '年份'}</Title>
      <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
        {data.bing.length === 0 ? (
          <Empty />
        ) : (
          <div
            id="container"
            style={{ width: '600px', height: '500px', margin: '0 24px' }}
          />
        )}
        <div style={{ width: '400px', borderLeft: '1px solid #999' }}>
          <ProTable
            search={false}
            pagination={false}
            options={false}
            style={{
              padding: 0,
            }}
            tableStyle={{
              padding: 0,
            }}
            cardProps={{
              style: {
                padding: 0,
              },
              bodyStyle: {
                padding: 0,
              },
            }}
            columns={[
              {
                dataIndex: 'zb',
                title: '重要比率',
              },
              {
                dataIndex: 'value',
                title: '数值',
              },
              {
                dataIndex: 'js',
                title: '比去年',
              },
            ]}
            dataSource={data.biaoge}
          />
        </div>
      </div>
      <Divider />
      <Space>
        快捷跳转：
        <Link to="/time/lr">年度会计管理</Link>
        <Link to="/calculate">登账管理</Link>
        <Link to="/suject">科目设置</Link>
      </Space>
    </Card>
  );
}
